// 响应式设计工具类 - 纯工具函数，不依赖 Vue

export const breakpoints = {
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px'
}

export const mediaQueries = {
  xs: `(max-width: ${breakpoints.xs})`,
  sm: `(max-width: ${breakpoints.sm})`,
  md: `(max-width: ${breakpoints.md})`,
  lg: `(max-width: ${breakpoints.lg})`,
  xl: `(max-width: ${breakpoints.xl})`,
  xxl: `(max-width: ${breakpoints.xxl})`,

  minXs: `(min-width: ${breakpoints.xs})`,
  minSm: `(min-width: ${breakpoints.sm})`,
  minMd: `(min-width: ${breakpoints.md})`,
  minLg: `(min-width: ${breakpoints.lg})`,
  minXl: `(min-width: ${breakpoints.xl})`,
  minXxl: `(min-width: ${breakpoints.xxl})`,

  smOnly: `(min-width: ${breakpoints.sm}) and (max-width: ${breakpoints.md})`,
  mdOnly: `(min-width: ${breakpoints.md}) and (max-width: ${breakpoints.lg})`,
  lgOnly: `(min-width: ${breakpoints.lg}) and (max-width: ${breakpoints.xl})`,
  xlOnly: `(min-width: ${breakpoints.xl}) and (max-width: ${breakpoints.xxl})`
}

// 获取当前断点
export const getCurrentBreakpoint = (): string => {
  if (typeof window === 'undefined') return 'lg'

  const width = window.innerWidth

  if (width < 480) return 'xs'
  if (width < 576) return 'sm'
  if (width < 768) return 'md'
  if (width < 992) return 'lg'
  if (width < 1200) return 'xl'
  return 'xxl'
}

// 检查是否为移动设备
export const isMobile = (): boolean => {
  const breakpoint = getCurrentBreakpoint()
  return breakpoint === 'xs' || breakpoint === 'sm'
}

// 检查是否为平板设备
export const isTablet = (): boolean => {
  return getCurrentBreakpoint() === 'md'
}

// 检查是否为桌面设备
export const isDesktop = (): boolean => {
  const breakpoint = getCurrentBreakpoint()
  return breakpoint === 'lg' || breakpoint === 'xl' || breakpoint === 'xxl'
}

// 检查是否为大屏幕
export const isLargeScreen = (): boolean => {
  const breakpoint = getCurrentBreakpoint()
  return breakpoint === 'xl' || breakpoint === 'xxl'
}

// 响应式值配置
export const responsiveValues = {
  // 字体大小
  fontSize: {
    xs: {
      title: '20px',
      subtitle: '16px',
      body: '14px',
      caption: '12px'
    },
    sm: {
      title: '22px',
      subtitle: '18px',
      body: '14px',
      caption: '12px'
    },
    md: {
      title: '24px',
      subtitle: '18px',
      body: '14px',
      caption: '12px'
    },
    lg: {
      title: '26px',
      subtitle: '20px',
      body: '16px',
      caption: '14px'
    },
    xl: {
      title: '28px',
      subtitle: '22px',
      body: '16px',
      caption: '14px'
    },
    xxl: {
      title: '32px',
      subtitle: '24px',
      body: '18px',
      caption: '16px'
    }
  },

  // 间距
  spacing: {
    xs: {
      xs: '4px',
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '20px',
      xxl: '24px'
    },
    sm: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '20px',
      xl: '24px',
      xxl: '28px'
    },
    md: {
      xs: '8px',
      sm: '12px',
      md: '16px',
      lg: '24px',
      xl: '32px',
      xxl: '40px'
    },
    lg: {
      xs: '8px',
      sm: '12px',
      md: '20px',
      lg: '28px',
      xl: '40px',
      xxl: '48px'
    },
    xl: {
      xs: '12px',
      sm: '16px',
      md: '24px',
      lg: '32px',
      xl: '48px',
      xxl: '56px'
    },
    xxl: {
      xs: '16px',
      sm: '20px',
      md: '28px',
      lg: '40px',
      xl: '56px',
      xxl: '64px'
    }
  },

  // 布局
  layout: {
    container: {
      xs: '100%',
      sm: '540px',
      md: '720px',
      lg: '960px',
      xl: '1140px',
      xxl: '1320px'
    },
    sidebar: {
      xs: '200px',
      sm: '220px',
      md: '240px',
      lg: '260px',
      xl: '280px',
      xxl: '300px'
    },
    header: {
      xs: '56px',
      sm: '60px',
      md: '64px',
      lg: '64px',
      xl: '64px',
      xxl: '64px'
    }
  },

  // 网格列数
  grid: {
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 4,
    xxl: 6
  },

  // 卡片列数
  cardColumns: {
    xs: 1,
    sm: 2,
    md: 2,
    lg: 3,
    xl: 3,
    xxl: 4
  }
}

// 获取响应式值
export const getResponsiveValue = <T>(
  values: Record<string, T>,
  defaultValue?: T
): T => {
  const breakpoint = getCurrentBreakpoint()
  return values[breakpoint] || values.lg || defaultValue || values.md || Object.values(values)[0]
}

// 触摸设备检测
export const isTouchDevice = (): boolean => {
  if (typeof window === 'undefined') return false
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
}

// 移动端适配工具
export const mobileAdaptation = {
  // 调整表格为卡片视图
  tableToCard: (breakpoint: string = 'md'): boolean => {
    return ['xs', 'sm'].includes(breakpoint)
  },

  // 调整网格布局
  gridColumns: (totalColumns: number, breakpoint: string): number => {
    const maxColumns = responsiveValues.grid[breakpoint as keyof typeof responsiveValues.grid]
    return Math.min(totalColumns, maxColumns)
  },

  // 调整卡片布局
  cardColumns: (breakpoint: string): number => {
    return responsiveValues.cardColumns[breakpoint as keyof typeof responsiveValues.cardColumns]
  },

  // 调整表单布局
  formLayout: (breakpoint: string): 'vertical' | 'horizontal' => {
    return ['xs', 'sm'].includes(breakpoint) ? 'vertical' : 'horizontal'
  },

  // 调整分页大小
  pageSize: (currentSize: number, breakpoint: string): number => {
    if (['xs', 'sm'].includes(breakpoint)) {
      return Math.min(currentSize, 10)
    }
    return currentSize
  }
}

// 防抖函数
export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout | null = null

  return (...args: Parameters<T>) => {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}

// 节流函数
export const throttle = <T extends (...args: any[]) => any>(
  func: T,
  limit: number
): ((...args: Parameters<T>) => void) => {
  let inThrottle: boolean = false

  return (...args: Parameters<T>) => {
    if (!inThrottle) {
      func(...args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

// 匹配媒体查询
export const matchMedia = (query: string): boolean => {
  if (typeof window === 'undefined') return false
  return window.matchMedia(query).matches
}

// 检查当前断点是否匹配
export const isBreakpoint = (breakpoint: string): boolean => {
  return getCurrentBreakpoint() === breakpoint
}

// 检查是否在指定断点范围内
export const isBreakpointRange = (minBreakpoint: string, maxBreakpoint: string): boolean => {
  const current = getCurrentBreakpoint()
  const order = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
  const currentIndex = order.indexOf(current)
  const minIndex = order.indexOf(minBreakpoint)
  const maxIndex = order.indexOf(maxBreakpoint)

  return currentIndex >= minIndex && currentIndex <= maxIndex
}

// 响应式 CSS 类生成器
export const responsiveClasses = {
  // 显示/隐藏
  display: {
    hidden: (breakpoint?: string) => {
      if (!breakpoint) return 'hidden'
      return `hidden-${breakpoint}`
    },
    visible: (breakpoint?: string) => {
      if (!breakpoint) return 'visible'
      return `visible-${breakpoint}`
    }
  },

  // Flex 布局
  flex: {
    col: (breakpoint?: string) => {
      if (!breakpoint) return 'flex-col'
      return `flex-col-${breakpoint}`
    },
    row: (breakpoint?: string) => {
      if (!breakpoint) return 'flex-row'
      return `flex-row-${breakpoint}`
    }
  },

  // 文本对齐
  text: {
    left: (breakpoint?: string) => {
      if (!breakpoint) return 'text-left'
      return `text-left-${breakpoint}`
    },
    center: (breakpoint?: string) => {
      if (!breakpoint) return 'text-center'
      return `text-center-${breakpoint}`
    },
    right: (breakpoint?: string) => {
      if (!breakpoint) return 'text-right'
      return `text-right-${breakpoint}`
    }
  }
}